<template>
  <div class="test-mutation-contaner">
        <h2>{{ title }}</h2>
        <div>count1: {{ count1 }}</div>
        <div>count2: {{ count2 }}</div>
        <div>count3: {{ count3 }}</div>
        <div>count4: {{ count4 }}</div>
        <div>count5: {{ count5 }}</div>
        <div>count6: {{ count6 }}</div>
        <div>count7: {{ count7 }}</div>
        <div>count8: {{ count8 }}</div>

        <el-button @click="addEvent">+</el-button>
        <el-button @click="addObjEvent">+obj</el-button>
        <el-button @click="objSubmit">objSubmit</el-button>
        <el-button @click="count4Event">count4Event</el-button>
        <el-button @click=addCount>count5Event</el-button>
        <el-button @click="count6Event(1)">count6Event</el-button>

        <el-button @click="count7Add">count7Event</el-button>
        <el-button @click="someMutationEvent">someMutation</el-button>
  </div>
</template>

<script>
    import { mapMutations } from 'vuex';
    export default {
        props: {
            title: {
                type: String,
                default: '',
            }
        },
        computed: {
            count1() {
                return this.$store.state.count1;
            },
            count2() {
                return this.$store.state.count2;
            },
            count3() {
                return this.$store.state.count3;
            },
            count4() {
                return this.$store.state.count4;
            },
            count5() {
                return this.$store.state.count5;
            },
            count6() {
                return this.$store.state.count6;
            },
            count7() {
                return this.$store.state.count7;
            },
            count8() {
                return this.$store.state.count8;
            },

        },
        data() {
            return {

            };
        },
        created() {
            
        },
        mounted() {

        },
        methods: {
            addEvent() {
                this.$store.commit('incrementCount',10);
            },
            addObjEvent() {
                this.$store.commit('incrementCountObj',{
                    num: 1
                });
            },
            //对象风格的提交方式
            objSubmit() {
                this.$store.commit({
                    type: 'objSubmit',
                    num: 1,
                })
            },
            count4Event() {
                this.$store.commit({
                    type: 'ADD_COUNT',
                    num: 1,
                })
            },
            ...mapMutations([
                'addCount',
                'count6Event',
            ]),
            ...mapMutations({
                count7Add: 'count7Event'
            }),
            someMutationEvent() {
                this.$store.commit('someMutation')
            }
        },
    }
</script>

<style scoped>
    .test-mutation-contaner {

    }
</style> 